<? $imagesPath = $this->getConstant('IMAGES_PATH') ?>
<div class="mainServicesContainer">
    <div class="allServicesList" id="allServicesList">
        <div class="head">
            <div class="leftPart" id="servicesTitle">
                <span id="servicesTitle">Сервисы</span>
                <span id="extText" class="none"> - все планируемые, исполненные, желаемые Сервисы на <a href="./">deeflow.com</a></span>
            </div>
            <div class="help">
                <a id ="settingsView" href="javascript:void(0);"><span class="none" id="hideSettings">убрать </span>настройки</a>
                <a id ="help" href="javascript:void(0);">?</a>
            </div>
        </div>
        <div id="settingsPanel" class="hide">
            <div class="settingsPanel">


                <div class="bg-alert">
                    <b>* не функционирует // @@ToDo@@</b>  
                </div>

                <div class="column">
                    <dd>
                        <dl>Опции</dl>
                    <dt>Отображать иконку Статуса выполнения</dt>
                    <dt>Всегда открывать панель настроек</dt>
                    <dt>Отображать Версию возле имени Сервиса</dt>
                    </dd>
                </div>

                <div class="column">
                    <dd>
                        <dl>Фильтры</dl>
                    <dt>По стадии завершенности/выполнения</dt>
                    <dt>По направлению</dt>
                    <dt>По Популярности</dt>
                    </dd>

                </div>
            </div>
        </div>
        <? foreach ($this->allServicesList as $value): ?>
            <?= $this->partial('index/partials/oneService2.phtml', array('oneService' => $value, 'imagesPath' => $imagesPath)); ?>
        <? endforeach; ?>
    </div>

</div>

</div>


<script>
    
    $(document).ready(function(){
        
        $('#servicesTitle').mouseover(function(item){
            $('#extText').fadeIn('fast');
        });
        
        $('#servicesTitle').mouseleave(function(item){
            $('#extText').fadeOut('fast');
        });
        
        $('#settingsView').click(function(){
            
            $('#hideSettings').animate({"opacity": "toggle"}, {"duration": "fast"});
            
            $('#settingsPanel').animate({
                "height": "toggle", 
                "opacity": "toggle"
            }, 
            { duration: "fast" });
        });

    });
    
    
    
    
</script>